// 左侧侧边栏-这是所有页面都要用到的组件
<template>
    <div class="lfet-nav"><!--给div写样式-->
        <ul>
            <li>
                <!-- 引入阿里的样式，格式：icon iconfont(阿里网站名) (复制代码) -->
                <i class="icon iconfont icon-goumai"></i>
                <div>收银</div>
            </li>
            <li>
                <i class="icon iconfont icon-dianpu"></i>
                <div>店铺</div>
            </li>
            <li>
                <i class="icon iconfont icon-hanbao"></i>
                <div>商品</div>
            </li>
            <li>
                <i class="icon iconfont icon-huiyuanqia"></i>
                <div>会员</div>
            </li>
            <li>
                <i class="icon iconfont icon-attention2"></i>
                <div>统计</div>
            </li>
            <li>
                <i class="icon iconfont icon-gongnengjianyi"></i>
                <div>设置</div>
            </li> 
        </ul>
    </div>
</template>

<script>
export default {
    
}
</script>

// style元素希望在每个页面都可用，不加scoped
<style>
.lfet-nav{
    color: #fff; /*白色*/
    font-size: 10px;
    height: 100%; /*侧边栏的样式撑满整个屏幕*/
    background-color: #1D8CE0;
    float: left; /*靠左侧浮动，默认上下浮动，和其他div联动就是左右联动，而不是上下联动*/
    width: 5%; /*宽度*/
}
.iconfont{ /*把图片都改大一点，这样一次把6个都引用到了*/
    font-size: 24px;
}
.lfet-nav ul{   /*给div下的ul一些样式*/
    padding: 0px;
    margin: 0px;
}
.lfet-nav li{
    list-style: none;
    text-align: center; /*字体对齐方式*/
    border-bottom: 1px solid #20a0ff;/*盒子底边是1像素，加颜色*/
    padding: 10px;
}
</style>
